<template>
  <div class="clock">
    <div class="clock-item">
      <div class="digital">{{hour}}</div>
    </div>
    <div class="clock-item">
      <div class="digital">{{miuntes}}</div>
    </div>
    <div class="clock-item">
      <div class="digital">{{second}}</div>
    </div>
  </div>
</template> 

<script>
export default {
  name: "Clock",
  props: ["hour", "miuntes", "second"],
  setup() {

  }
}
</script>

<style lang="scss">
.clock {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.04);
  // background-color: #fff;
  border-radius: var(--global-border-radius);
  font-family: Arial, Helvetica, sans-serif;
  // box-shadow: var(--box-shadow);
  
  &-item {
    display: flex;
    width: 8rem;
    height: 8rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-radius: var(--global-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    // color: #FFFFFF;
    box-shadow: var(--box-shadow);
  }
}
</style>